<!--
auto-check
机检、人检比例（驾驶舱部分）
 -->
<template>
    <div class="auto-check">
        <!-- 机检 -->
        <div class="half">
            <chart
            chartId="guaChart1"
            :options="guaOptions1"></chart>
        </div>
        <!-- 人检 -->
        <div class="half">
            <chart
            chartId="guaChart2"
            :options="guaOptions2"></chart>
        </div>
        <div class="year-border"></div>
    </div>
</template>

<script>
import {
    getAutoCheck, // 获取人检机检数据接口
} from '@/apis';
// 引入数学运算
import $Math from '@/utils/math';
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'auto-check',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    data() {
        return {
            val1: 25, // 机检数据
            val2: 75, // 人检数据
        };
    },
    computed: {
        // 机检比例配置
        guaOptions1() {
            const {
                size01,
            } = this;
            return {
                series: [
                    {
                        type: 'gauge',
                        radius: '86%',
                        center: ['50%', '50%'],
                        progress: {
                            show: true,
                            width: 12 * size01,
                            roundCap: true,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 12 * size01,
                                color: [[1, '#184596']],
                            },
                            roundCap: true,
                        },
                        axisTick: {
                            show: false,
                            distance: -20,
                            length: 2,
                            splitNumber: 2,
                            lineStyle: {
                                width: 8,
                                color: '#173c85',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40 * size01,
                            offsetCenter: [0, '5%'],
                            fontSize: 22 * size01,
                            color: '#27fbdc',
                            fontWeight: 'bolder',
                            formatter: '{value}%',
                        },
                        data: [
                            {
                                value: this.val1,
                                itemStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#47ddfd' },
                                        { offset: 0.5, color: '#2a8ebd' },
                                        { offset: 1, color: '#0e417f' },
                                    ]),
                                },
                            },
                        ],
                    },
                ],
                title: {
                    text: '机检占比',
                    textAlign: 'center',
                    bottom: '14%',
                    left: '45%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                    padding: 5 * size01,
                    borderWidth: 1,
                    borderColor: '#6BD5FF',
                    borderRadius: 23 * size01,
                    backgroundColor: 'rgba(0,159,255,0.69)',
                },
            };
        },
        // 人检比例配置
        guaOptions2() {
            const {
                size01,
            } = this;
            return {
                series: [
                    {
                        type: 'gauge',
                        radius: '85%',
                        center: ['50%', '50%'],
                        progress: {
                            show: true,
                            width: 12 * size01,
                            roundCap: true,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 12 * size01,
                                color: [[1, '#184596']],
                            },
                            roundCap: true,
                        },
                        axisTick: {
                            show: false,
                            distance: -20,
                            length: 2,
                            splitNumber: 2,
                            lineStyle: {
                                width: 8,
                                color: '#173c85',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                        },
                        anchor: {
                            show: false,
                            showAbove: true,
                            size: 25,
                            itemStyle: {
                                borderWidth: 10,
                            },
                        },
                        pointer: {
                            show: false,
                        },
                        title: {
                            show: false,
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 40 * size01,
                            offsetCenter: [0, '5%'],
                            fontSize: 22 * size01,
                            color: '#27fbdc',
                            fontWeight: 'bolder',
                            formatter: '{value}%',
                        },
                        data: [
                            {
                                value: this.val2,
                                itemStyle: {
                                    color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                        { offset: 0, color: '#47ddfd' },
                                        { offset: 0.5, color: '#2a8ebd' },
                                        { offset: 1, color: '#0e417f' },
                                    ]),
                                },
                            },
                        ],
                    },
                ],
                title: {
                    text: '人检占比',
                    textAlign: 'center',
                    bottom: '16%',
                    left: '46%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * size01,
                    },
                    padding: 5 * size01,
                    borderWidth: 1,
                    borderColor: '#6BD5FF',
                    borderRadius: 23 * size01,
                    backgroundColor: 'rgba(0,159,255,0.69)',
                },
            };
        },
    },
    methods: {
        // 获取人检机检数据
        getCheckData() {
            getAutoCheck().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    const val1 = data.filter((item) => item.name.includes('人检占比'))[0].value;
                    const val2 = data.filter((item) => item.name.includes('机检占比'))[0].value;
                    this.val2 = $Math.multiply(val1, 100);
                    this.val1 = $Math.multiply(val2, 100);
                }
            }).catch((err) => {
                window.console.log('获取人检机检数据', err);
            });
        },
    },
    created() {
        this.getCheckData();
    },
};
</script>
<style lang='scss'>
.auto-check {
    position: absolute;
    // width: 6.22rem;
    // height: 3.556rem;
    width: 100%;
    height: 100%;
    // top: 1.2rem;
    // left: .1rem;
    top: 35%;
    left: 3%;
    transform: rotateZ(5deg);
    overflow: hidden;

    .half {
        width: 50%;
        height: 100%;
        float: left;
    }

    .year-border {
        width: 1px;
        height: 90%;
        background: #0980D3;
        background: #0980D3;
        transform: rotateY(21deg);
        position: absolute;
        top: .1rem;
        left: 0;
    }
}

</style>
